<template>
  <div class="header-div flex rest">
    <p class="flex" @click="goToBack">
      <van-icon name="arrow-left" class="active" />
      <span class="active head-text">{{ i18n.$t('back') }}</span>
    </p>
    <p>{{i18n.$t(headerTitle)}}</p>
  </div>
</template>

<script lang="ts">
import { useI18n } from '@/i18nPlugin'
import { ref, defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  nem: 'MheaderTitle',
  props: {
    headerTitle: {
      type: String,
      default: '',
    },
  },
  setup: (props, context) => {
    const router = useRouter()
    const i18n = useI18n()
    const showPopover = ref(false)
    const headerTitle = ref(props.headerTitle)
    const actions = [{ text: '中文' }, { text: 'English' }]
    let popSelect = (item: any) => {
      const locale = item.text === '中文' ? 'en' : 'es'
      i18n.locale.value = locale
    }
    let goToBack = () => {
      context.emit('goBack')
    }
    return {
      actions,
      i18n,
      popSelect,
      showPopover,
      headerTitle,
      goToBack,
    }
  },
})
</script>

<style scoped lang="scss">
.header-div {
  width: 100%;
  padding: 0 5%;
  height: 40px;
  position: fixed;
  z-index: 1000;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  p {
    width: 33.333%;
  }
  p:nth-child(1) {
    font-size: 14px;
    i {
      font-size: 18px;
    }
  }
  p:nth-child(2) {
    font-size: 14px;
    color: #333;
    text-align: center;
  }
}
.van-popover__content {
  width: 100%;
}
.flex-row :deep(.van-icon) {
  font-size: 30px;
}
.active {
  color: $theme !important;
  // font-weight: bold;
}
</style>
